<template>
  <div class="body build-body" id="main">

    <div class="build-banner">
      <div id="w0" class="anchor" style="-webkit-transform:translateY(-122px);transform: translateY(-122px)"></div>
      <div class="center-block">
        <div class="Crumbs">
          您的位置：
          <router-link to="/home">首页<b>&gt;</b></router-link>
          <router-link to="/dataService">数据服务<b>&gt;</b></router-link>
          <a href="javascript:;" target="">建设项目</a>
        </div>
        <h2 class="build-title">发展改革委民旺园23号楼等9个老旧小区综合整治项目</h2>

        <div class="hyaline">
          <p class="hyaline-tag">
            <span v-if="baseInfo.isReg" class="spaTaB">市政工程</span>
            <span v-if="baseInfo.isReg" class="spaTaO">新建</span>
            <span v-if="baseInfo.isReg" class="spaTaR">小型</span>
            <span v-if="baseInfo.isReg" class="spaTaB">自建</span>
            <span v-if="baseInfo.isReg" class="spaTaR">国有资金</span>
          </p>
          <div class="hyaline-box clearfix">
            <p><span>项目编号</span>1101021605200101</p>
            <p><span>建设单位</span>国家发展和改革委员会基建物业管理中心</p>
            <p><span>详细地址</span>合肥市高新区创新大道与习友路交口东南角</p>
            <p><span>机构代码</span>40000068-3</p>
          </div>
        </div>

      </div>
    </div>

    <navigation id="nav" :navData="conData"></navigation>

    <section class="center-block">
      <div class="anchor" id="w1"></div>
      <h2 class="item-title">项目建档</h2>
      <div class="item-body">
        <section>

          <h3 class="item-title-small">基本信息</h3>
          <ul class="demoTable clearfix">
            <li><label>项目编号</label><span>1101021605200101</span></li>
            <li><label>建档时间</label><span>2019年05月19日</span></li>
            <li><label>所在区划</label><span>安徽省-合肥市-高新区</span></li>
            <li><label>建设地址</label><span>合肥市高新区创新大道与习友路交口东南角</span></li>
            <li><label>建设单位</label><span>国家发展和改革委员会基建物业管理中心</span></li>
            <li><label>项目负责人</label><span>徐正阳</span></li>
            <li><label>项目用途</label><span>住宅</span></li>
            <li><label>资金性质</label><span>国有资金</span></li>
            <li><label>项目分类</label><span>市政工程</span></li>
            <li><label>机构代码</label><span>40000068-3</span></li>
            <li><label>建设性质</label><span>新建</span></li>
            <li><label>建设模式</label><span>自建</span></li>
            <li><label>项目规模</label><span>大型</span></li>
            <li><label>建筑面积</label><span>580000 平方米</span></li>
          </ul>
        </section>
        <section>
          <h3 class="item-title-small">资金来源</h3>
          <ul class="demoTable clearfix">
            <li><label style="width: 100px">预算总投资</label><span style="width: 150px">9800 万元</span></li>
            <li><label>各级政府财政资金投资</label><span style="width: 200px">7980 万元</span></li>
          </ul>
        </section>
        <section>
          <h3 class="item-title-small">立项规划</h3>
          <ul class="demoTable clearfix">
            <li><label>立项文号</label><span>1101021605200101</span></li>
            <li><label>立项级别</label><span>2019年05月19日</span></li>
            <li><label>批复机关</label><span>安徽省-合肥市-高新区</span></li>
            <li><label>批复时间</label><span>合肥市高新区创新大道与习友路交口东南角</span></li>
            <li><label>建设单位</label><span>国家发展和改革委员会基建物业管理中心</span></li>
            <li><label>机构代码</label><span>徐正阳</span></li>
            <li><label style="width: 110px;">计划开工时间</label><span style="width: 200px;">住宅</span></li>
            <li><label>计划竣工时间</label><span>国有资金</span></li>
            <li><label style="width:160px;">建设用地规划许可证</label><span style="width: 420px;">市政工程</span></li>
            <li><label>建设工程规划许可证</label><span>40000068-3</span></li>

          </ul>
        </section>
        <section>
          <h3 class="item-title-small">地图标注</h3>
          <div class="item-map" id="item-map"></div>
        </section>
        <section class="personCtrl">
          <h3 class="item-title-small">项目简介</h3>
          <div class="text-area">
            <p>
              客户关系管理信息系统领域的技术开发、技术咨询、技术服务、技术转让,客户关系管理软件的研发、销售及技术服务,汽车软件研发,网络技术咨询,汽车租赁,汽车代驾服务,汽车装潢,企业营销策划,广告制作、发布、代理,境内文化艺术交流活动策划,通讯器材、汽车用品销售。客户关系管理信息系统领域的技术开发、技术咨询、技术服务、技术转让,客户关系管理软件的研发、销售及技术服务,汽车软件研发,网络技术咨询,汽车租赁,汽车代驾服务,汽车装潢,企业营销策划,广告制作、发布、代理,境内文化艺术交流活动策划,通讯器材、汽车用品销售。(依法须经批准的项目,经相关部门批准后方可开展经营活动)***</p>
          </div>
        </section>
      </div>
    </section>

    <section class="bg">
      <div class="center-block">
        <div class="anchor" id="w2"></div>
        <h2 class="item-title">项目内容</h2>
        <div class="item-body">
          <section>
            <h3 class="item-title-small">子线工程及规模</h3>
            <div class="tableB margin-top-0">
              <el-table :data="content" style="width: 100%" class="detail-table">
                <el-table-column type="index" label="序号" width="80"></el-table-column>
                <el-table-column prop="title" label="单位工程" width="482"></el-table-column>
                <el-table-column prop="bianma" label="工程编码" width="300"></el-table-column>
                <el-table-column prop="gonglei" label="工程类别"></el-table-column>
                <el-table-column prop="zhuangtai" label="状态"></el-table-column>
              </el-table>
              <div class="padding-top-20">
                <el-pagination
                  background
                  :current-page="1"
                  :page-sizes="[10, 20, 50, 100]"
                  :page-size="10"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="5">
                </el-pagination>
              </div>

            </div>
          </section>
          <section class="relative">
            <h3 class="item-title-small">建设效果图</h3>
            <nav class="inFot">
              <span>效果图(23)</span>
              <span>航拍图(3)</span>
              <span>实景图(83)</span>
              <router-link to="/dataService/album">查看更多 <b> > </b></router-link>
            </nav>
            <ul class="effect clearfix">
              <li v-for="(item,index) in xiaoguotu" :key="index">
                <a href="javascript:;">
                  <div class="effectImg">
                    <img src="@/assets/images/sa.png" alt="">
                  </div>
                  <div class="effectText text-center">
                    <h4>{{item.title}}</h4>
                  </div>
                </a>
              </li>
            </ul>
          </section>
        </div>
      </div>
    </section>

    <section>
      <div class="center-block">
        <div class="anchor" id="w3"></div>
        <h2 class="item-title">项目发包</h2>
        <div class="item-body">

          <section>
            <h3 class="item-title-small">发包关系图</h3>
            <div class="fabao center-block text-center">
              <img style="transform: translateY(30px)" src="../../../assets/images/datase/fabao.png" alt="">
            </div>
          </section>

          <section>
            <h3 class="item-title-small">发包情况</h3>

            <nav id="" class="inFot difTab-title">
              <span :class="index===0?'active':''" v-for="(item,index) in qingkuang.type" :key="index">{{item.title}}({{item.shuliang}})</span>
            </nav>
            <div class="difTab">
              <div class="difTab-body">

                <section class="active">
                  <ul class="cardUl">
                    <li v-for="(value,index) in qingkuang.rows" :key="index">
                      <div class="cardBox clearfix">
                        <div class="rightContent">
                          <h3 class="rightContentH3"><i>{{index+1}}</i><a href="#">{{value.title}}</a></h3>
                          <router-link class="cardMore" :to="`/dataService/project/detail?id=${value.id}`"><i
                            class="dtFont dtFont-chakanzhengshu"></i><br>工程详情
                          </router-link>

                          <ul class="rightContentUl">
                            <li><label>工程编码</label><span>{{value.bianma}}</span></li>
                            <li><label>承包方</label><span>{{value.chengbao}}</span></li>
                            <li><label style="text-indent: 1em">合同价</label><span>3800万元</span></li>

                            <li><label>发包时间</label><span>{{value.fabaoshijian}}</span></li>
                            <li><label>发包方</label><span>{{value.fabao}}</span></li>
                            <li><label>招标形式</label><span>{{value.zhaobiaofas}}</span></li>
                          </ul>
                        </div>
                      </div>
                    </li>
                  </ul>
                  <div class="padding-top-20">
                    <el-pagination
                      background
                      :current-page="1"
                      :page-sizes="[10, 20, 50, 100]"
                      :page-size="10"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="5">
                    </el-pagination>
                  </div>
                </section>
              </div>
            </div>
          </section>

          <section>
            <h3 class="item-title-small">参建主体 </h3>

            <nav class="inFot didTab-title">
              <span class="active">责任单位</span>
              <span>责任人员</span>
            </nav>
            <div class="didTab">

              <div class="didTab-body">

                <section class="active">
                  <ul class="cardUl">
                    <li v-for="(value,index) in canjian.rows" :key="index">
                      <div class="cardBox clearfix">

                        <div class="rightContent">
                          <h3 class="rightContentH3"><i>{{index+1}}</i>{{value.title}}
                            <small>一级发包</small>
                          </h3>

                          <div class="cardTAg" :class="value.tag"></div>
                          <ul class="rightContentUl clearfix">
                            <li><label>机构代码</label><span>{{value.bianma}}</span></li>
                            <li><label>承揽资质 </label><span>{{value.chengbao}}</span></li>
                            <li><label>合同价</label><span>{{value.hetong}}</span></li>
                            <li class="w100"><label>参与内容</label><span>{{value.canyu}}</span></li>
                          </ul>
                          <div class="sladeBoxBtn">
                            <span class="active" :class="index === 0 ?'active':''"></span>
                          </div>
                          <div class="sladeBox" :class="index === 0 ?'active':''">
                            <div class="active sladeBoxCon">
                              <p>责任人员</p>
                              <div class="tableB">
                                <table class="table project-table" cellpadding="0" cellspacing="0">
                                  <thead>
                                  <tr>
                                    <th style="width: 80px">序号</th>
                                    <th class="text-center" style="width: 150px;">人员姓名</th>
                                    <th class="text-center" style="width: 260px;">身份证号码</th>
                                    <th class="text-center" style="width: 170px;">担任角色</th>
                                    <th class="text-center">退场时间</th>
                                    <th class="text-center">在岗履职率</th>
                                  </tr>
                                  </thead>
                                  <tbody>
                                  <tr>
                                    <td>1</td>
                                    <td class="text-center">李白</td>
                                    <td class="text-center">360102201905150104</td>
                                    <td class="text-center">项目负责人</td>
                                    <td class="text-center">2018年03月30日</td>
                                    <td class="text-center"><span class="green">97%</span></td>
                                  </tr>
                                  <tr>
                                    <td>2</td>
                                    <td class="text-center">李里皮</td>
                                    <td class="text-center">360102201905150104</td>
                                    <td class="text-center">项目负责人</td>
                                    <td class="text-center">2018年03月30日</td>
                                    <td class="text-center"><span class="blue">100%</span></td>
                                  </tr>

                                  </tbody>
                                </table>
                              </div>
                            </div>
                            <div class="padding-top-20">
                              <el-pagination
                                background
                                :current-page="1"
                                :page-sizes="[10, 20, 50, 100]"
                                :page-size="10"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="5">
                              </el-pagination>
                            </div>
                          </div>
                        </div>
                      </div>


                    </li>
                  </ul>
                  <div class="padding-top-20">
                    <el-pagination
                      background
                      :current-page="1"
                      :page-sizes="[10, 20, 50, 100]"
                      :page-size="10"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="5">
                    </el-pagination>
                  </div>

                </section>

              </div>
            </div>
          </section>
        </div>
      </div>


      <div class="center-block" style="padding-top: 40px">
        <div class="item-body">
          <section>
            <h3 class="item-title-small">事件时间轴</h3>

            <ul class="timeGo">

              <li class="clearfix" v-for="(value,index) in lixiang.rows" :key="index">
                <div class="timeGo-Main">
                  <h2><i>{{index+1}}</i><span>{{value.title}}</span>{{value.time}}</h2>
                  <div class="timeGoBox">
                    <p>{{value.content}}</p>
                  </div>
                </div>
              </li>

            </ul>
          </section>

        </div>
      </div>

    </section>

    <section class="bg">
      <div class="center-block">
        <div class="anchor" id="w4"></div>
        <div class="QuaT">
          <h3 class="circular-title">工程文书信息</h3>

          <div id="QuaTle1" class="QuaTle">
            <span :class="index===0?'active':''" v-for="(item,index) in xixin.type" :key="index">{{item.title}}</span>
          </div>
        </div>

        <div class="item-body this-body">

          <section class="active">
            <div class="tableB margin-top-0 margin-bottom-20">
              <el-table :data="xixin.rows" style="width: 100%" class="detail-table">
                <el-table-column type="index" label="序号" width="80"></el-table-column>
                <el-table-column prop="title" label="标段名称" width="390"></el-table-column>
                <el-table-column prop="leixin" label="招标类型" width="160"></el-table-column>
                <el-table-column prop="fangshi" label="招标方式" width="130"></el-table-column>
                <el-table-column prop="bianhao" label="中标通知书编号" width="300"></el-table-column>
                <el-table-column prop="time" label="中标时间"></el-table-column>
              </el-table>
            </div>
            <div class="padding-top-20">
              <el-pagination
                background
                :current-page="1"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="5">
              </el-pagination>
            </div>
          </section>

        </div>
      </div>

    </section>

    <section class="bg padding-top-0">
      <div class="center-block">
        <div class="anchor" id="w7"></div>
        <h2 class="item-title">信用评价</h2>
        <div class="item-body">

          <section>
            <dl class="evaluate">
              <dd v-for="(value,index) in pingjia.rows" :key="index">
                <h2><span>建设单位</span>{{value.title}}</h2>
                <ul class="starUl starUls">
                  <li class="clearfix" v-for="(item,index2) in value.star" :key="index2">
                    <div class="credit">{{item.title}}</div>
                    <div class="star" :class="item.fen | parseStar">
                      <span><i class="dtFont dtFont-wujiaoxing-"></i></span>
                      <span><i class="dtFont dtFont-wujiaoxing-"></i></span>
                      <span><i class="dtFont dtFont-wujiaoxing-"></i></span>
                      <span><i class="dtFont dtFont-wujiaoxing-"></i></span>
                      <span><i class="dtFont dtFont-wujiaoxing-"></i></span>
                    </div>
                    <div class="fenshu">{{item.fen}}分</div>
                    <div class="compare" :class="item.up?'compareUp':'compareDown'">
                      <i class="dtFont" :class="item.up?'dtFont-shangsheng':'dtFont-xiajiang1'"></i>{{item.up?'高':'低'}}于同行标准
                      <span>{{item.zhi}}</span>
                    </div>
                  </li>
                </ul>
              </dd>
            </dl>

          </section>

        </div>
      </div>
    </section>

  </div>
</template>

<script>
  import {getConDetail, getConFabao} from '@/api/dataService';
  import navigation from '@/components/navigation';

  export default {
    name: "conDetail",
    components: {navigation},
    data() {
      return {
        conData: {
          navList: [
            {name: '基本信息', id: 'w0'},
            {name: '项目建档', id: 'w1'},
            {name: '项目内容', id: 'w2'},
            {name: '项目发包', id: 'w3'},
            {name: '工程文书信息', id: 'w4'},
            // {name: '项目进度', id: 'w4'},
            // {name: '建设程序', id: 'w5'},
            // {name: '过程监管', id: 'w6'},
            {name: '信用评价', id: 'w7'}
          ],
          top: 395
        },
        id: '',
        baseInfo: {
          isReg: true
        },
        content: [],
        xiaoguotu: [],
        canjian: {
          page: 1,
          pageSize: 1,
          type: [],
          rows: [],
          total: 0
        },
        qingkuang: {
          page: 1,
          pageSize: 1,
          type: [],
          rows: [],
          total: 0
        },
        lixiang: {
          rows: []
        },
        xixin: {
          page: 1,
          pageSize: 1,
          type: [],
          rows: [],
          total: 0
        },
        pingjia: {
          page: 1,
          pageSize: 1,
          type: [],
          rows: [],
          total: 0
        }
      }
    },
    mounted() {
      this.$router.afterEach((to, from, next) => {
        window.scrollTo(0, 0)
      })
      //console.log(this.$route);
      this.id = this.$route.query.id || '';
      this.getConDetail()
      this.getConFabao()
    },
    methods: {
      getConDetail(data) {
        getConDetail(data).then(res => {
          this.content = res.content.zixian.rows
          this.xiaoguotu = res.content.xiaoguotu.rows
        })
      },
      getConFabao(data) {
        getConFabao(data).then(res => {
          let {qingkuang, pingjia, canjian, lixiang, xixin} = res;
          this.qingkuang.rows = qingkuang.rows
          this.qingkuang.type = qingkuang.type
          this.canjian.rows = canjian.rows
          this.canjian.type = canjian.type
          this.lixiang.rows = lixiang.rows
          this.xixin.type = xixin.type
          this.xixin.rows = xixin.rows
          this.pingjia.rows = pingjia.rows
        })
      }
    },
    filters: {
      parseStar: function (value) {
        if (!value) return ''
        return 'star' + Math.floor(parseFloat(value) / 2);
        //return value
      }
    }
  }
</script>